import { GetAdminInfoApi } from "@/api";
import store from "@/store";
import LoginVue from "@/views/login/Login.vue";
import { Message } from "element-ui";
import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: "/login",
  },
  {
    path: "/login",
    component: LoginVue,
  },
  // {
  //   path: "/home",
  //   name: "Home",
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () =>
  //     import(/* webpackChunkName: "about" */ "../views/home/Home.vue"),
  //   // children: [
  //   //   {
  //   //     path: "pms/product",
  //   //     component: () => import("../views/pms/product.vue"),
  //   //   },
  //   //   {
  //   //     path: "pms/addProduct",
  //   //     component: () => import("../views/pms/addProduct.vue"),
  //   //   },
  //   // ],
  // },
  // 后面要使用的动态路由要这么设计
  // {
  //   // 一级路由，跟我们从后端返回的 一级菜单是对应的，一级菜单的name属性，就是该路由的path
  //   path: "/pms",
  //   component: () => import("../views/home/Home.vue"),
  //   children: [
  //     {
  //       // 二级路由，就是二级菜单对应的name
  //       path: "product",
  //       component: () => import("../views/pms/product.vue"),
  //     },
  //     {
  //       path: "addProduct",
  //       component: () => import("../views/pms/addProduct.vue"),
  //     },
  //   ],
  // },
];

export function dynamicRoute() {
  const newRouter = new VueRouter({
    routes,
  });

  // 每次重新登录，一定会重新生成路由，此时一定会进入这里，就把 路由对象的matcher 重置了
  router.matcher = newRouter.matcher;
  // 生成一个首页的路由
  // 直接生成一个一级路由就行
  router.addRoute({
    path: "/aaa",
    component: () => import("../views/home/Home.vue"),
    children: [
      {
        path: "/index",
        component: () => import("../views/index/Index.vue"),
      },
    ],
  });
  // 现在需要使用到 sotre里面的getters 来动态添加对应的路由
  let menus = store.getters.userMenus;
  menus.forEach((menu) => {
    // menu是一级菜单，也包信一级路由的数据
    const route = {
      path: `/${menu.name}`,
      component: () => import("../views/home/Home.vue"),
      name: menu.name,
      children: [],
    };
    menu.children.forEach((sub) => {
      route.children.push({
        // 二级菜单，也是二级路由的数据
        path: sub.name,
        // component的路径一定要对，所以我们要严格地按照 每个 菜单的 name 来建立文件夹和 .vue 文件
        component: () => import(`../views/${menu.name}/${sub.name}.vue`),
        name: sub.name,
      });
    });
    // 采用 router 的addRoute 方法来添加路由配置
    router.addRoute(route);
  });
}

const router = new VueRouter({
  routes,
});

// 把第一次请求用户权限数据的逻辑放到 前置守卫里面 - 如果还有别的页面要获取权限，就不用再写一遍
router.beforeEach((to, from, next) => {
  // 如果是在登录的情况下刷新，需要重新请求权限数据
  // 什么情况下，才是刷新
  // 如果有token，并且vuex里面的数据是没有的
  let token = localStorage.getItem("token");
  // 只有当我们的路由不是home 并用有token ，并且 vuex里面没数据，才是刷新
  if (to.path !== "/home" && token && store.state.menus.length === 0) {
    GetAdminInfoApi().then((res) => {
      if (res.code === 200) {
        // 把数据同步到vuex
        store.commit("saveMenu", res.data.menus);
        store.commit("saveRoles", res.data.roles);
        // 生成动态路由
        dynamicRoute();
        // 跳转到 当前刷新的 页面
        next(to);
      }
    });
  }
  // 如果是进入home页面，其实我们只是用来判断并发请求的，并没有这个路由，一定要先获取用户的权限，如果没有权限，就不能进入
  else if (token && to.path === "/home") {
    // 发请求
    GetAdminInfoApi().then((res) => {
      if (res.code === 200) {
        // 把数据同步到vuex
        store.commit("saveMenu", res.data.menus);
        store.commit("saveRoles", res.data.roles);
        // 生成动态路由
        dynamicRoute();
        // 跳转到 index 页面
        next("/index");
      }
    });
  }
  // 如果现在有token并且访问的是登录，不让他访问
  else if (token && to.path === "/login") {
    Message.warning("目前已经登录，请勿重复登录");
    // 从哪个页面要访问login，就跳转回原来的页面就行
    next(from);
  }
  // 如果没有token，并且访问的不是login就直接跳转到login
  else if (!token && to.path !== "/login") {
    next("/login");
  }

  // 一定要先有一个放行
  next();
});

export default router;
